﻿@model CustomerTokenListModel

@{
    Layout = "_ColumnsTwo";
    NopHtml.AddTitleParts(T("Plugins.Payments.CyberSource.PaymentTokens").Text);
    NopHtml.AppendPageCssClassParts("html-account-page");
}

@section left
{
    @(await Component.InvokeAsync(typeof(CustomerNavigationViewComponent), new { selectedTabId = CyberSourceDefaults.CustomerTokensMenuTab }))
}

<div class="page account-page order-list-page">
    <div class="page-title">
        <h1>@T("Account.MyAccount") - @T("Plugins.Payments.CyberSource.PaymentTokens")</h1>
    </div>
    <div class="page-body">
        @if (Model.Tokens.Any())
        {
            <div class="order-list">
                @foreach (var token in Model.Tokens)
                {
                    <div class="section order-item">
                        <div class="title">
                            <strong>@T("Payment.CardNumber"): @token.CardNumber</strong>
                        </div>
                        <ul class="info">
                            <li>@T("Payment.ExpirationDate"): <span class="order-date">@token.CardExpirationMonth / @token.CardExpirationYear</span></li>
                        </ul>
                        <div class="buttons">
                            <button type="button" class="button-2 edit-address-button" onclick="location.href = '@(Url.RouteUrl(CyberSourceDefaults.CustomerTokenEditRouteName, new {tokenId = token.Id}))'">@T("Common.Edit")</button>

                            <button type="button" class="button-2 delete-address-button" onclick="deletecybersourcetoken(@(token.Id))">@T("Common.Delete")</button>
                        </div>
                    </div>
                }
            </div>
            <script asp-location="Footer">
                function deletecybersourcetoken(tokenId) {
                    if (confirm('@T("Common.AreYouSure")')) {
                        var postData = {
                            tokenId: tokenId
                        };
                        addAntiForgeryToken(postData);

                        $.ajax({
                            cache: false,
                            type: 'POST',
                            url: '@Url.Action("TokenDelete", "CyberSourceCustomerToken")',
                            data: postData,
                            dataType: 'json',
                            success: function (data, textStatus, jqXHR) {
                                location.href = data.redirect;
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert('Failed to delete');
                            }
                        });
                    }
                }
            </script>
        }
        else
        {
            <div class="no-data">
                @T("Plugins.Payments.CyberSource.PaymentTokens.NoTokens")
            </div>
        }
        <div class="add-button">
            <button type="button" class="button-1 add-address-button" onclick="location.href='@Url.RouteUrl(CyberSourceDefaults.CustomerTokenAddRouteName)'">@T("Common.AddNew")</button>
        </div>
    </div>
</div>